<template>
	<view class="page">
		<u-loading-icon v-if="info==''" style="margin-top: 30rpx;" text="加载中" textSize="16" color="#01B192" textColor="#01B192"></u-loading-icon>
		<view class="page1" v-if="info!=''&&info.id!=4">
			<view class="return" @click="toReturn()" style="box-shadow: 1rpx 2rpx 4rpx 2rpx gainsboro;">
				<u-icon name="arrow-left" size="20"></u-icon>
			</view>
			<view class="title">{{info.name}}</view>
			<view class="tit-info flex between">
				活动时间：{{info.activity_time_desc}}
				<!-- <view>阅读：{{info.pv}} 次</view> -->
			</view>
			<view class="content">
				<u-parse :content="info.detail"></u-parse>
			</view>
			<!-- <video v-if="info.path!=''" :poster="info.cover" class="myVideo"
				:src="'https://gxtravel.ncscloudmedia.com'+info.path" controls></video> -->
		</view>
	</view>
</template>

<script>
	import {
		activityDetail
	} from '@/api/apiData.js';
	export default {
		data() {
			return {
				info: '',
				imgList: [],
				type: 1,
				ws:null,
				path:'/pages/activity/detail'
			}
		},
		onLoad(option) {
			this.activity_id = option.id
			this.getInfo()
		},
		onShow() {
			this.connectWebSocket()
		},
		onHide() {
			// 页面隐藏/切入后台时触发
			let that = this
			this.sendData({
				type: 'page_leave',
				path: that.path,
				params: ""
			});
		},
		onUnload() {
			// 页面卸载时触发
			let that = this
			that.sendData({
				type: 'page_leave',
				path: that.path,
				params: ""
			});
		},
		methods: {
			// 连接
			connectWebSocket() {
				let that = this
				const wsUrl = "wss://gxtravel.ncscloudmedia.com/wss"; // 确保使用wss（WebSocket Secure）如果服务器支持
				that.ws = new WebSocket(wsUrl);
				that.ws.onopen = () => {
					//console.log("连接已建立");
					// 这里可以发送初始化消息等
					that.sendData({
						type: 'page_enter',
						path:that.path,
						params: ""
					});
				};
				that.ws.onmessage = (event) => {
					console.log("Message from server ", event.data);
					// 处理接收到的消息
				};
				that.ws.onerror = (error) => {
					console.error("连接失败: ", error);
				};
				that.ws.onclose = () => {
					console.log("连接失败，重新连接");
					// 可以在这里尝试重新连接
					that.connectWebSocket();
				};
			},
			// 发送
			sendData(data) {
				if (this.ws && this.ws.readyState === WebSocket.OPEN) {
					// this.ws.send(data); // 确保发送JSON格式的数据
					this.ws.send(JSON.stringify(data)); // 确保发送JSON格式的数据
				} else {
					console.error("WebSocket is not open");
				}
			},
			toReturn() {
				uni.navigateBack()
			},
			async getInfo() {
				const result = await activityDetail({
					activity_id: this.activity_id
				})
				if(result.data.is_jump==1){
					if(result.data.jump_config.wx_gzh.link!=''){
						window.location.replace(result.data.jump_config.wx_gzh.link)
					}else{
						this.info = result.data
					}
				}else{
					this.info = result.data
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.page {}

	.return {}

	.page1 {
		padding: 80rpx 32rpx;
	}

	.title {
		font-size: 32rpx;
		// text-align: center;
		font-weight: bold;
	}

	.tit-info {
		font-size: 26rpx;
		// text-align: center;
		margin: 16rpx 0 30rpx;
		color: grey;
	}

	.content {
		font-size: 28rpx;
		position: relative;

		.bgCon {
			width: 100%;
		}

		.imgs {
			position: absolute;
			top: 345rpx;
			padding: 0 20rpx;
			flex-wrap: wrap;

			.imgItem {
				width: 345rpx;
				position: relative;
				margin-bottom: 14rpx;

				.img {
					width: 100%;
				}

				.more {
					width: 112rpx;
					position: absolute;
					top: 0rpx;
					right: 12rpx;
					// box-shadow: 1rpx 2rpx 10rpx 2rpx gainsboro;
					// background: #FF9F00;
					color: white;
					font-size: 20rpx;
					border-radius: 20rpx;
					text-align: center;
					line-height: 1;
					padding: 10rpx 0;
					// border: solid 2rpx #FFC462;
				}
			}
		}

		// .imgItem {
		// 	position: absolute;
		// }

		// .img1 {
		// 	width: 290rpx;
		// 	top: 265rpx;
		// 	left: 23rpx;
		// }

		// .img2 {
		// 	width: 350rpx;
		// 	top: 230rpx;
		// 	right: 15rpx;
		// }

		// .img3 {
		// 	width: 138rpx;
		// 	top: 385rpx;
		// 	left: 23rpx;
		// }

		// .img4 {
		// 	width: 240rpx;
		// 	top: 385rpx;
		// 	left: 170rpx;
		// }

		// .img5 {
		// 	width: 240rpx;
		// 	top: 385rpx;
		// 	right: 28rpx;
		// }

		// .img6 {
		// 	width: 328rpx;
		// 	top: 560rpx;
		// 	left: 23rpx;
		// }

		// .img7 {
		// 	width: 314rpx;
		// 	top: 560rpx;
		// 	right: 11rpx;
		// }

		// .img8 {
		// 	width: 225rpx;
		// 	top: 700rpx;
		// 	left: 23rpx;
		// }

		// .img9 {
		// 	width: 210rpx;
		// 	top: 700rpx;
		// 	left: 260rpx;
		// }

		// .img10 {
		// 	width: 185rpx;
		// 	top: 700rpx;
		// 	right: 20rpx;
		// }
	}

	.myVideo {
		width: 100%;
		object-fit: cover;
		// overflow: hidden;
		// width: 100%;
		// // height: 360px;
		// /* 设置一个固定的高度 */
		// position: relative;
		// .myVideo {
		// 	width: 100%;
		// 	object-fit: fill;
		// 	height: auto;
		// 	// height: 100%;
		// }
	}
</style>